<template>
    <Back title="医院导航" navigation-view-sty="navigation">
        <template #buttons>
            <el-button type="primary" size="small" plain>删除</el-button>
            <el-button @click="$router.push('/Hospital/navigation/add')" type="primary" size="small">新增院区</el-button>
        </template>
        <template>
            <el-input placeholder="请输入院区" style="width:250px; margin-right: 10px;" type="age" v-model="value"
                autocomplete="off" size="small"></el-input>
            <el-button type="primary" @click="seachDanger" size="small">搜索</el-button>
        </template>

        <template #table_body>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column type="selection" prop="item.prop" label="item.label"></el-table-column>
                <el-table-column prop="danger" label="院区"></el-table-column>
                <el-table-column prop="location" label="地址">
                    <el-avatar icon="el-icon-user-solid"></el-avatar>
                </el-table-column>
                <el-table-column prop="phone1" label="电话1"></el-table-column>
                <el-table-column prop="phone2" label="电话2"></el-table-column>
                <el-table-column prop="bus" label="公交"></el-table-column>
                <el-table-column prop="operationtime" label="操作时间"></el-table-column>
                <el-table-column prop="operation" label="操作">
                    <template slot-scope="scoped">
                        <i @click="changeDoctor(scoped.row)" class="el-icon-s-claim"></i>
                        <i @click="removeDoctor(scoped.row)" class="el-icon-delete-solid"></i>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <template #page>
            <Page :pageNum="data.length" v-on:handleSizeChange="handleSizeChange" v-on:select="selectChange"
                :currentPage4="currentPage" />
        </template>
    </Back>
</template>
<script>
import Back from '@/components/Part/BackColor.vue'
import Page from '@/components/Part/paga.vue'
import { getNavigationList, getNavigationSeachList, getNavigationRemove } from '@/api/Hospital/navigationApi'
export default {
    data() {
        return {
            tableData: [],
            data: [],
            value: '',
            // 当前页码
            currentPage: 1,
            // 记录当前每页多少行
            handleSize: 10,
        }
    },
    methods: {
        handleSelectionChange(val) {
        },
        selectChange(val) {
            // 获取当前页数
            this.tableData = this.data.slice((val - 1) * this.handleSize, (this.handleSize * val))
            this.currentPage = val
        },
        seachDanger() {
            if (this.value) {
                getNavigationSeachList({ danger: this.value }).then((res) => {
                    this.data = res.data.map((item) => {
                        item.danger = this.value ? this.value : item.danger
                        return item
                    })
                    this.currentPage = 1
                    this.tableData = this.data.slice(0, this.handleSize)
                })
            }
        },
        getAllDoctorList() {
            getNavigationList().then((res) => {
                this.data = res.data
                this.tableData = res.data.slice(0, this.handleSize)
            })
        },
        // 修改医生信息
        changeDoctor(val) {
            this.$router.push({ path: '/Hospital/navigation/add?navid=' + val.navid })
        },
        // 删除事件
        removeDoctor(val) {
            this.$confirm('删除后无法恢复，确定要删除此条信息吗？', {
                title: '删除确定',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getNavigationRemove({ navid: val.navid }).then((res) => {
                    if (res.code == '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getAllDoctorList()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取当前每页多少行
        handleSizeChange(val) {
            this.handleSize = +val
            this.currentPage = 1
            this.tableData = this.data.slice(0, this.handleSize)
        }
    },
    mounted() {
        this.getAllDoctorList()
    },
    components: {
        Back,
        Page
    }
}
</script>
<style lang="scss" scoped>
.el-avatar {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.el-tag--mini {
    border-radius: 999px;
    margin-right: 5px;
}
</style>
    <style lang="scss">
[navigation-view-sty="navigation"] {
    .el-table__body-wrapper {
        min-height: 400px;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        text-align: center;
    }

    .el-table::before,
    .el-table__fixed-right::before,
    .el-table__fixed::before {
        height: 0;
    }

    .el-table td.el-table__cell div {
        font-size: 12px;
        // height:50px;
        line-height: 1;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .el-icon-s-claim {
        margin-right: 20px;
    }

    .el-icon-s-claim,
    .el-icon-delete-solid {
        color: rgb(0, 110, 255);
        font-size: 20px;
        cursor: pointer;
    }

}
</style>